<template>
  <div class="edit-teacher-modal modal">
    <div class="edit-teacher" v-loading="loading">
      <div class="modal-header">
        <span>{{ text + '老师' }}</span>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="label">老师姓名</div>
          <div class="data name-data">
            <el-input v-model="localTeacher.F_teacher.F_name"></el-input>
          </div>
          <div class="label">性别</div>
          <div class="data gender-wrapper">
            <BaseRbSelect :list="genderList" v-model:item="gender"></BaseRbSelect>
          </div>
        </div>
        <div class="row">
          <span class="label">电话号码</span>
          <span class="data">
            <el-input
              maxlength="11"
              v-model="localTeacher.F_teacher.F_phone"
            ></el-input>
          </span>
        </div>

        <div class="row teach-row">
          <div class="label">授课班级</div>
          <div class="data teach-data">
            <ul>
              <li
                v-for="(item, index) in localTeacher.F_teach_list"
                :key="item.F_id + '_' + item.F_subject"
              >
                <span class="class-name">
                  {{ `${item.F_name}-${item.F_subject_name}` }}
                </span>
                <span class="delete-btn btn" @click="deleteTeachItem(index)"
                  >删除</span
                >
              </li>
            </ul>
          </div>
          <div class="add-wrapper">
            <add-component level="subject" @add="addTeachItem"></add-component>
          </div>
        </div>

        <div class="row">
          <div class="label">管理班级</div>
          <div class="data teach-data">
            <ul>
              <li
                v-for="(item, index) in localTeacher.F_manage_list"
                :key="item.F_id + '_manage'"
              >
                <span class="class-name">
                  {{ item.F_name }}
                </span>
                <span class="delete-btn btn" @click="deleteManageItem(index)"
                  >删除</span
                >
              </li>
            </ul>
          </div>
          <div class="add-wrapper">
            <add-component @add="addManageItem"></add-component>
          </div>
        </div>

        <div class="row" v-if="type === $maps.type.EDIT">
          <div class="label" style="width: 100px">账号</div>
          <div class="data">
            <el-input
              v-model="localTeacher.F_teacher.F_account"
              :disabled="accountInputDisabled"
              maxlength="20"
            ></el-input>
            <span class="edit-pwd-btn btn" @click="setAccount">{{
              accountInputDisabled ? '编辑' : '保存'
            }}</span>
          </div>
        </div>

        <div class="row" v-if="type === $maps.type.EDIT">
          <div class="label" style="width: 100px">密码</div>
          <div class="data">
            <el-input
              v-model="password"
              :disabled="pwdInputDisabled"
              maxlength="10"
            ></el-input>
            <span
              class="edit-pwd-btn btn"
              v-if="pwdInputDisabled"
              @click="resetPassword"
              >重置</span
            >
          </div>
        </div>

        <div class="row flex-end" v-if="showAddUser">
          <span class="btn-text" @click="toAddUser">增设/编辑管理角色</span>
        </div>
      </div>
      <div class="modal-footer">
        <div class="btn-group">
          <div class="cancel-btn btn" @click="close(false)">取消</div>
          <div class="confirm-btn btn" @click="close(true)">确认</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import addComponent from './addComp.vue';
import { mapState, mapGetters } from 'vuex';
import { HIDE_RIGHT_MANAGE_ROLE_LIST } from '@/utils/constant';

const getDescribe = (schoolInfo) => {
  console.log(schoolInfo);
  const {
    F_loc: {
      F_city_id,
      F_city_name,
      F_district_id,
      F_district_name,
      F_prov_id,
      F_prov_name,
    },
  } = schoolInfo;
  return {
    province_list: [
      { F_id: F_prov_id, F_name: F_prov_name, F_pid: 0, F_level: 1 }
    ],
    city_list: [
      { F_id: F_city_id, F_name: F_city_name, F_pid: F_prov_id, F_level: 2 }
    ],
    county_list: [
      { F_id: F_district_id, F_name: F_district_name, F_pid: F_city_id, F_level: 3 }
    ],
    school_list: [
      schoolInfo
    ],
    subject_list: [],
    grade_list: [],
    class_list: [],
    level: 4,
  }
};

export default {
  name: 'EditTeacher',
  components: {
    addComponent,
  },
  props: {
    type: { type: Number, required: true },
    teacher: { type: Object, required: true },
    page: { type: Number, required: true },
  },
  data() {
    return {
      loading: false,
      text: '',
      localTeacher: {
        F_manage_list: [],
        F_teach_list: [],
        F_teacher: {},
      },
      genderList: [],
      gender: {},
      addLevel: 'subject',
      accountInputDisabled: true,
      pwdInputDisabled: true,
      password: '',
    };
  },
  computed: {
    ...mapState('school', ['schoolInfo', 'schoolOptions']),
    ...mapState('user', ['userInfo']),
    ...mapGetters('school', ['schoolId']),
    showAddUser() {
      return (
        this.type === this.$maps.type.EDIT &&
        !HIDE_RIGHT_MANAGE_ROLE_LIST.includes(this.userInfo.role)
      );
    },
  },
  watch: {
    gender() {
      this.localTeacher.F_teacher.F_gender = this.gender.id;
    },
  },
  async mounted() {
    this.localTeacher = JSON.parse(JSON.stringify(this.teacher));
    if (this.type === this.$maps.type.EDIT) {
      this.text = '编辑';
      this.password = this.localTeacher.F_teacher.F_password;
    } else {
      this.text = '添加';
    }
    this.genderList = this.$maps.genderList;
    this.gender = this.genderList.find(
      (e) => e.id === this.localTeacher.F_teacher.F_gender
    );
  },

  methods: {
    async toAddUser() {
      const { F_is_exist, F_user_list } = await this.$api.getUserByPhone({
        F_phone: this.localTeacher.F_teacher.F_phone,
      });
      const userInfo =
        F_is_exist === 0
          ? {
              F_user_name: this.localTeacher.F_teacher.F_name,
              F_user_account: this.localTeacher.F_teacher.F_phone,
              F_gender: this.localTeacher.F_teacher.F_gender,
              F_describe: JSON.stringify(getDescribe(this.schoolInfo)),
            }
          : F_user_list;
      sessionStorage.setItem('edit_user_info', JSON.stringify(userInfo));
      this.$router.push({
        path: '/homepage/rightsManage/addMember',
        query: {
          type: F_is_exist === 0 ? this.$maps.type.ADD : this.$maps.type.EDIT,
          page: this.page,
        },
      });
    },
    resetPassword() {
      this.password = '123456';
      this.pwdInputDisabled = false;
    },
    async setAccount() {
      if (this.accountInputDisabled) {
        this.accountInputDisabled = false;
        return;
      }
      this.loading = true;
      try {
        const formData = new FormData();
        formData.append('F_school_id', this.schoolId);
        formData.append('F_teacher_id', this.localTeacher.F_teacher.F_id);
        formData.append('F_prefix', this.localTeacher.F_teacher.F_account);
        formData.append('F_type', 1);
        const { F_responseNo, F_responseMsg } = await this.$api.setAccount(
          formData
        );
        if (F_responseNo === 10000) {
          this.$toast('修改账号成功');
          this.$emit('getTeachers');
        } else {
          this.$toast('修改账号失败:' + F_responseMsg);
        }
      } catch (e) {
        console.error(e);
        this.$toast('修改账号失败，请联系后台成员');
      }
      this.loading = false;
    },
    close(sign) {
      if (!sign) this.$emit('update');
      else {
        if (this.type === this.$maps.type.EDIT) {
          this.localTeacher.F_teacher.F_password = this.password;
        }
        this.$emit('update', this.localTeacher);
      }
    },
    deleteTeachItem(index) {
      this.localTeacher.F_teach_list.splice(index, 1);
    },
    deleteManageItem(index) {
      this.localTeacher.F_manage_list.splice(index, 1);
    },
    addTeachItem(val) {
      const res = this.localTeacher.F_teach_list.find(
        (e) => e.F_id === val.F_id && e.F_subject === val.F_subject
      );
      if (!res) this.localTeacher.F_teach_list.push(val);
    },
    addManageItem(val) {
      console.log(this.localTeacher.F_manage_list, val);
      const res = this.localTeacher.F_manage_list.find(
        (e) => e.F_id === val.F_id
      );
      if (!res) this.localTeacher.F_manage_list.push(val);
    },
  },
};
</script>

<style lang="less" scoped>
.edit-teacher {
  width: 600px;
  height: 600px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 6px;
  background-color: #fff;
  .modal-header {
    padding: 0 20px;
    height: 45px;
    line-height: 54px;
    font-size: 18px;
    color: #666;
  }
  .modal-body {
    box-sizing: border-box;
    height: calc(100% - 45px - 70px);
    font-size: 16px;
    padding: 24px;
    // overflow-y: auto;
    .row {
      display: flex;
      margin: 10px 0;
      position: relative;
      .add-wrapper {
        position: absolute;
        right: 20px;
        top: 10px;
      }
      .label {
        box-sizing: border-box;
        padding: 9.5px 18px;
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .name-data {
        .el-input {
          width: 220px;
        }
      }
      .data {
        display: flex;
        flex: 1;
        position: relative;
      }
      .edit-pwd-btn {
        padding: 5px 10px;
        background-color: #009cff;
        color: #fff;
        position: absolute;
        right: 20px;
        top: 4px;
      }
      .gender-wrapper {
        display: flex;
        box-sizing: border-box;
        padding: 0 15px;
        height: 40px;
        align-items: center;
        border: 1px solid #dcdfe6;
        i {
          margin-left: 8px;
        }
      }
      .teach-data,
      .manage-data {
        padding: 10px 15px;
        border: 1px solid #dcdfe6;
        min-height: 30px;
        position: relative;
        max-height: 100px;
        overflow-y: auto;
      }
      .teach-data {
        ul {
          .class-name {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            padding: 0 8px;
            margin: 3px 0;
            border: 1px solid #dedede;
          }
          .delete-btn {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            padding: 0 4px;
            border: 1px solid #dedede;
            border-radius: 0px 4px 4px 0;
            border-left: none;
            color: #009cff;
            background-color: #f5f5f5;
          }
        }
      }
    }

    .flex-end {
      display: flex;
      justify-content: flex-end;
    }
    .btn-text {
      color: #009cff;
      cursor: pointer;
    }
  }
  .modal-footer {
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn-group {
      display: flex;
      justify-content: center;
      align-items: center;
      .btn {
        width: 80px;
        height: 34px;
        line-height: 34px;
      }
      .cancel-btn {
        margin-right: 20px;
        background-color: #fff;
        border: solid 2px #f5f5f5;
        color: #b3b3b3;
      }
      .confirm-btn {
        background-color: #009cff;
        color: #fff;
      }
    }
  }
}
</style>
